<template>
  <el-dialog
    title="上传超前支护图纸"
    :visible.sync="dialogVisible"
    width="25%"
    :before-close="handleClose">
   
<el-form ref="form" :model="form"  label-width="100px">
   <el-form-item label="隧道">
    <el-select v-model="form.tId" placeholder="请选择隧道">
    <el-option command="e" v-for="v in tunnelList" :label="v.tunName"  :key="v.id"  :value="v.id"  ></el-option>
    </el-select>
  </el-form-item>
    <el-form-item label="图号">
    <el-input v-model="form.picNumber"></el-input>
</el-form-item>
  <el-form-item label="图名">
    <el-input v-model="form.picName"></el-input>
</el-form-item>
<el-form-item label="适用车道数">
    <el-input v-model="form.applyTunnellengthType"></el-input>
</el-form-item>
<el-form-item label="适用衬砌类型">
  <el-select v-model="form.liningTypeNumber" placeholder="请选择隧道">
      <el-option label="T5" value="T5"></el-option>
      <el-option label="Z4d" value="Z4d"></el-option>
      <el-option label="T3" value="T3"></el-option>
      <el-option label="Z5d" value="Z5d"></el-option>
      <el-option label="Z5t" value="Z5t"></el-option>
      <el-option label="C4b" value="C4b"></el-option>
      <el-option label="Z5c" value="Z5c"></el-option>
      <el-option label="Z4c" value="Z4c"></el-option>
      <el-option label="T4" value="T4"></el-option>
      <el-option label="Z3b" value="Z3b"></el-option>
      <el-option label="Z4b" value="Z4b"></el-option>
      <el-option label="Z4a" value="Z4a"></el-option>
      <el-option label="Z3a" value="Z3a"></el-option>
      <el-option label="Z5b" value="Z5b"></el-option>
      <el-option label="C3b" value="C3b"></el-option>
      <el-option label="Z5a" value="Z5a"></el-option>
      <el-option label="C5b" value="C5b"></el-option>
    </el-select>
</el-form-item>
 <el-form-item label="图纸">
    <el-upload
  name="file"
  class="upload-demo"
  action="string"
  :http-request="beforeAvatarUploadThree"
  :on-preview="handlePreview"
  :on-remove="handleRemove"
  :before-remove="beforeRemove"
  multiple
  :limit="3"
  :on-success="handlesuccess"
  :on-error="handleerror"
  :on-exceed="handleExceed"
  :file-list="fileList">
  <el-button size="small" type="primary">点击上传</el-button>
</el-upload>
</el-form-item>

</el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="create">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>

import api from "../../../../api";
import qs from "qs"

export default {
  data(){
    return {
      dialogVisible: false,
      tunnelList:[],
      form:{
         tId: '' ,//隧道id
         picNumber:'', //图号
         picName:'',// 图名
         applyTunnellengthType:'',
         liningTypeNumber:'',
         resources:''// 资源地址
      },
       fileList: []
    }
  },
  mounted() {
    this.$bus.$on("onAddDrawSupport", (flag) => {
      this.dialogVisible = flag;
    });
   // 查询隧道
      api.tunnelInfoFindByAll().then(res=>{
        if(res.data.code == 2001){
            this.tunnelList = res.data.data
        }
      }).catch(err=>{
        console.log(err)
      })
  },
  methods: {
      handleClose(done) {
              this.$confirm('确认关闭？')
                .then(_ => {
                 
                  done();
                }).catch(_ => {});
      },
      create(){
        api.drawSupportsave(qs.stringify(this.form)).then(res=>{
          if (res.data.code == 2001){
                this.$message({
                  type: 'success',
                  message: '添加成功!'
                });
               this.dialogVisible = false
               this.$bus.$emit("onRefreshDrawSupport",true)
          }

        }).catch(err=>{

        })
      },
      onSubmit() {
        console.log('submit!');
      },
      uploadImg (f) {
        const file = f.file
        const d = new FormData()
        d.append('file', file)
        api.AddrPlaneFileUpload(d).then(res=>{
          if (res.data.code == 2001){
              this.form.resources = res.data.data
          }
        }).catch(err=>{

        })
      },
      // 上传图片前的过滤
      beforeAvatarUpload (file) {
        const isLt2M = (file.size / 1024 / 1024) < 1000
        if (!isLt2M) {
          this.$message.error('上传图片大小不能超过 200MB!')
        }
        return isLt2M
      },
      handlesuccess(response, file, fileList){
        console.log(response)
        if (response.code == 2001){
            this.form.resources = response.data
        }
      },
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePreview(file) {
        console.log(file);
      },
      handleExceed(files, fileList) {
        this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
      },
      beforeRemove(file, fileList) {
        return this.$confirm(`确定移除 ${ file.name }？`);
      },
      handleerror(err, file, fileList){
        console.log(err)
      },
      beforeAvatarUploadThree(file) {
        let params = new FormData()
            params.append("file", file.file);
            api.AddrPlaneFileUpload(params).then(res=>{
              if (res.data.code == 2001){
                this.form.resources = res.data.data
              }
            }).catch(err => {

            })
      }



  }

}
</script>

<style scoped>
  .avatar-uploader .el-upload {
    position: relative;
    overflow: hidden;
    cursor: pointer;
    border: 1px dashed #d9d9d9;
    border-radius: 6PX;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    width: 50PX !important;
    height: 50PX !important;
    font-size: 28PX;
    line-height: 50PX !important;
    color: #8c939d;
    text-align: center;
  }
  .avatar {
    display: block;
    width: 50PX !important;
    height: 50PX !important;
  }
  .imgbeforepad{
    padding-top: 0px !important;
  }
  .avatar-uploader .el-icon-plus{
    margin: 15PX !important;
  }

</style>